<template>
  <div class="add-form">
    <Modal :value.sync="isShow" :title="titleName" :footer-hide="true" @on-cancel="changeNo">
      <Form :rules="rules" ref="infoList" :model="infoList"  label-position="right" :label-width="100">
        <FormItem label="用户名：" prop="username">
          <Input v-model="infoList.username" placeholder="请输入用户名" :autofocus="true"></Input>
        </FormItem>
        <FormItem label="邮箱：" prop="email">
          <Input v-model="infoList.email" placeholder="请输入邮箱"></Input>
        </FormItem>
        <FormItem label="密码：" prop="password" v-if="isIF">
          <Input v-model="infoList.password" placeholder="请输入密码" type="password"></Input>
        </FormItem>
        <FormItem label="职位：" prop="role">
          <Input v-model="infoList.role" placeholder="请输入职位"></Input>
        </FormItem>
        <FormItem label="权限名称：" prop="permission_group_id">
          <Select v-model="infoList.permission_group_id">
            <Option :value="item.id" v-for="item in permissionInfo" :key="item.id">{{item.title}}</Option>
          </Select>
        </FormItem>
        <FormItem label="联系电话：" prop="phone">
          <Input v-model="infoList.phone" placeholder="请输入联系电话"></Input>
        </FormItem>
        <FormItem label="介绍：" prop="introduction">
          <Input v-model="infoList.introduction" placeholder="介绍一下这个职位吧" type="textarea" :rows="5"></Input>
        </FormItem>
      </Form>
      <Row type="flex" justify="center">
        <Button style="margin-right: 5px" @click="cancelBth">取消</Button>
        <Button type="info" @click="confirmBtn">确认</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { add, update, list } from '@/api/base/users.js'
export default {
  props: {
    isIF: {
      type: Boolean
    },
    isShow: {
      type: Boolean,
      default: false
    },
    permissionInfo: {
      default: []
    },
    titleName: {
      type: String,
      default: '编辑用户'
    },
    userId: {
      default: ''
    },
    // 表单数据
    infoList: {
      // password: '',
      // username: '',
      // phone: '',
      // permission_group_id: '',
      // email: '',
      // role: '',
      // introduction: '',
      // avatar: ''
    },
    infoData: {}
  },
  data () {
    return {
      isTrue: false,
      fromData: {},
      params: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      // 表单验证
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { max: 6, message: '超过长度限制', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '邮箱不能为空', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不合法', trigger: 'blur' }
        ],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        permission_group_id: [{ required: true, message: '权限不能为空', trigger: 'change', type: 'number' }],
        phone: [{ pattern: /^(?:(?:\+|00)86)?1\d{10}$/, message: '请输入合法的号码', trigger: 'blur' }]
      }
    }
  },
  methods: {
    async list () {
      await list(this.params)
    },
    // 确认按钮
    confirmBtn () {
      this.$refs.infoList.validate(async (valid) => {
        if (valid) {
          if (this.userId) {
            this.$Modal.confirm({
              title: '提示',
              content: '您确定的更改这条信息吗？',
              onOk: async () => {
                this.infoData = {
                  avatar: '',
                  email: this.infoList.email,
                  id: this.infoList.id,
                  introduction: this.infoList.introduction,
                  permission_group_id: this.infoList.permission_group_id,
                  phone: this.infoList.phone,
                  role: this.infoList.role,
                  username: this.infoList.username
                }
                // console.log(this.infoData)
                await update(this.infoData)
                this.$emit('userInfo')
                this.$Message.info('修改成功')
              },
              onCancel: () => {
                this.$Message.info('取消操作')
              }
            })
            this.$emit('update:isShow', false)
          } else {
            this.$Modal.confirm({
              title: '提示',
              content: '您确定的添加这条信息吗？',
              onOk: async () => {
                await add(this.infoList)
                this.$emit('userInfo')
                this.$emit('update:isShow', false)
                this.$emit('userInfo')
                this.$Message.info('添加成功')
              },
              onCancel: () => {
                this.$Message.info('取消操作')
              }
            })
          }
        }
      })
    },
    // 取消按钮
    cancelBth () {
      this.$emit('update:isShow', false)
    },
    changeNo () {
      this.$emit('update:isShow', false)
    }
  }
}
</script>

<style scoped>
/deep/ .ivu-input {
  resize: none;
}
</style>
